/**
 * 底部公共组件
 */

function utilBottomNav(name, a = 'body') {
    const page = document.querySelector(`.${a}`)
    //创建div
    const div = document.createElement('div')

    //添加类名
    div.className = 'modular-bottom dpflex'
    //给div添加内容
    div.innerHTML = `
        <a href="./home.html" class="navbox dpflex ${name === 'home' ? 'active' : ''}">
            <i class="iconfont icon-home3"></i>
            <span>首页</span>
        </a>
        <a href="./running.html" class="navbox dpflex ${name === 'running' ? 'active' : ''}">
            <i class="iconfont icon-sports2"></i>
            <span>运动</span>
        </a>
        <a href="./circle.html" class="navbox dpflex ${name === 'circle' ? 'active' : ''}">
            <i class="iconfont icon-share"></i>
            <span class="share-span">圈子</span>
        </a>
        <a href="./myself.html" class="navbox dpflex ${name === 'myself' ? 'active' : ''}">
            <i class="iconfont icon-my"></i>
            <span>我的</span>
        </a>
    `
    page.append(div)
}

/* 运动页面顶部导航栏组件 */
function sportsTopNav(name = 'run'){
    const header = document.createElement("header")

    header.className = "header-top-nav"

    header.innerHTML = `
    <div>
        <a class="${name=='running' ? 'active' : ''}" href="./running.html">跑步</a>
        <a class="${name=='ride' ? 'active' : ''}" href="./ride.html">骑行</a>
        <a class="${name=='course' ? 'active' : ''}" href="./course.html">课程训练</a>
    </div>
    `
    document.body.prepend(header)
}

//导出对象
module.exports = {
    utilBottomNav,
    sportsTopNav
}